/**
 * Created by Kylin on 2016/12/7.
 */

import React, {Component, PropTypes} from 'react';

export default class TodoList extends Component {
    action() {
        this.props.onShowClick(false);
    }

    render() {
        return (
            <ul>
                {
                    this.props.todos.map((todo, index) => <li
                        key={index} onClick={(e) => this.props.onTodoClick(index)}
                        style={{
                            textDecoration: todo.completed ? 'line-through' : 'none',
                            cursor: todo.completed ? 'default' : 'pointer'
                        }}
                    >{todo.text}
                        <button onClick={this.action.bind(this)}>删除</button>
                    </li>)
                }
            </ul>
        )
    }
}

TodoList.propTypes = {
    onTodoClick: PropTypes.func.isRequired,
    todos: PropTypes.arrayOf(PropTypes.shape({
        text: PropTypes.string.isRequired,
        completed: PropTypes.bool.isRequired
    }).isRequired).isRequired,
    onShowClick: PropTypes.func.isRequired
};